<template>
  <el-dialog :visible.sync="visible" custom-class="new-folder-dialog" :before-close="closeHandler" :close-on-click-modal="false">
    <div slot="title">
      <div class="dialog-title big_title">
        编辑文件夹
      </div>
    </div>
    <div class="width50 text-center" style="margin: auto 0;">
      <div style="">
       <el-input placeholder="请输入文件夹名称，最长64个字" class="font14 input_line" v-model="folders.name" maxlength="64"></el-input>
       <el-input placeholder="请输入文件序号[0-99]" class=" font14 input_line pt20" v-model="folders.folderNo"></el-input>
      </div>
    </div>
   <div slot="footer">
     <el-button :loading="loading" type="primary" @click="savefolder">保存</el-button>
   </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'NewFolderDialog',
  props: {
    folder: {
      type: Object,
      required: true
    },
    value: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      folders: {},
      loading: false
    }
  },
  computed: {
    visible: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    }
  },
  watch: {
    folder (newVal, oldValue) {
      this.folders = newVal
    }
  },
  methods: {
    closeHandler (done) {
      done()
    },
    savefolder () {
      this.loading = true
      this.visible = false
      // 0
      if (!this.folders.id) {
        this.folders.id = new Date().getTime()
      }
      this.$emit('editfolder', this.folders, this.folders.id)
      this.loading = false
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
